import React, { useEffect } from 'react';
import { TjForm } from '@/tjComponents';
import { useForm } from 'antd/es/form/Form';
import { InputNumber, Select } from 'antd';

const AddOrEditAccount: React.FC<IAddOrEditAccountProps> = (props) => {
  const [form] = useForm();

  useEffect(() => {
    props.getHandler &&
      props.getHandler(() => {
        return new Promise((resolve, reject) => {
          form
            .validateFields()
            .then((values: any) => {
              resolve(values);
            })
            .catch((values: any) => {
              reject(values);
            });
        });
      });
  });

  return (
    <TjForm
      form={form}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 18 }}
      initialValues={props.initValue}
      items={[
        {
          name: 'regionId',
          label: '区域',
          render: <Select options={props.regionList} />,
          rules: [{ required: true, message: '请选择区域' }],
        },
        {
          name: 'wfName',
          label: '风电场名称',
          rules: [
            { required: true, message: '请输入风电场名称' },
            {
              max: 30,
              message: '风电场名称最大长度为30个字符',
            },
          ],
        },
        {
          name: 'isMaintained',
          label: '是否为自有场站',
          rules: [{ required: true, message: '请选择是否为自有场站' }],
          render: (
            <Select
              options={[
                { label: '是', value: '1' },
                { label: '否', value: '0' },
              ]}
            />
          ),
        },
        {
          name: 'wfCapacity',
          label: '装机容量(MW)',
          rules: [{ required: true, message: '请输入装机容量' }],
          render: <InputNumber style={{ width: '100%' }} min="0" max="10000" />,
        },
        {
          name: 'account',
          label: '账号',
          rules: [
            { required: true, message: '请输入账号' },
            {
              max: 20,
              message: '账号最大长度为20个字符',
            },
          ],
        },
        {
          name: 'password',
          label: '密码',
          rules: [
            { required: true, message: '请输入密码' },
            {
              max: 20,
              message: '密码最大长度为20个字符',
            },
          ],
        },
      ]}
    />
  );
};

interface IAddOrEditAccountProps {
  getHandler?: (fn: () => Promise<any>) => void;
  regionList: any[];
  initValue?: any;
}

export default AddOrEditAccount;
